/**
 * mixins 混合
 */

 var base = {
    data :function(){
        return {
            visable :false
        }
    },
    methods: {
        show : function(){
            this.visable= true
        },
        hide : function(){
            this.visable = false
        }
    }
 }
Vue.component("tooltip",{
    template : `
        <div>
            <span
            @mouseenter="show"
            @mouseleave="hide"
            >bys</span>
            <div v-if="visable" 
            >白岩松</div>
        </div>
    `,
    mixins : [base]
})
Vue.component("popup",{
    template : `
    <div>
        <button
        @click="onClick"
        >显示/隐藏</button>
        <div v-if="visable" 
        >
        <h4>hello world</h4><span @click="hide">X</span>
        <div>1dasdasfasfasnfcalskndlahflanslfcasnklcknaslhfalsfl</div>
        </div>
    </div>
    `,
    mixins: [base],
    methods: {
        onClick : function(){
            this.visable= !this.visable
        }
    }
})
var app = new Vue({
    el : "#app",
    data : {
        card1 : {
            pined: false
        },
        card2 : {
            pined: false
        }     
    },
    methods : {
        onClick : function(){
            console.log("pined")
            this.pined = !this.pined
        }
    }
})